<template>
  <div class="payment-container">
    <div v-if="!paymentSuccess">
      <div class="qr-code">
        <img :src="selectedQrCodeUrl" alt="支付二维码" />
      </div>
      <div class="payment-options">
        <button
          @click="selectPaymentMethod('wechat')"
          :class="{ active: selectedPaymentMethod === 'wechat' }"
        >
          微信支付
        </button>
        <button
          @click="selectPaymentMethod('alipay')"
          :class="{ active: selectedPaymentMethod === 'alipay' }"
        >
          支付宝支付
        </button>
      </div>
      <div class="instructions">
        <p>请使用您的手机扫描二维码进行支付。</p>
      </div>
    </div>
    <div v-else class="success-message">
      <p>支付成功！感谢您的购买。</p>
      <button @click="goToOrders" class="confirm-button">确认</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCartStore } from '../../stores/cartStore';
const router = useRouter();
const cartStore = useCartStore();
const selectedPaymentMethod = ref('wechat'); // 初始选择设置为微信支付
const qrCodeUrl = {
  wechat: '/images/wx.jpg', // 微信二维码的静态路径
  alipay: '/images/zfb.jpg', // 支付宝二维码的静态路径
};
const selectedQrCodeUrl = ref(qrCodeUrl[selectedPaymentMethod.value]); // 设置初始二维码URL
const paymentSuccess = ref(false); // 支付成功状态
const selectPaymentMethod = (method) => {
  selectedPaymentMethod.value = method;
  selectedQrCodeUrl.value = qrCodeUrl[method]; // 更新二维码URL
  paymentSuccess.value = false; // 重置支付成功消息
  // 模拟支付处理
  setTimeout(() => {
    paymentSuccess.value = true; // 设置支付成功状态
  }, 3000); // 3秒后显示支付成功消息
};
// 确认按钮点击后跳转到我的订单
const goToOrders = () => {
  cartStore.clearSelectedItems(); // 清除已结算的商品
  router.push('/Order/Order');
};
</script>
<style scoped>
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.qr-code {
  margin: 20px 0;
}
.qr-code img {
  width: 400px; /* 设置二维码图片宽度 */
  height: 400px; /* 设置二维码图片高度 */
}
.payment-options {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.payment-options button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 12px 24px; /* 增加按钮内边距 */
  margin: 0 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  font-size: 16px; /* 增大字体 */
}
.payment-options button.active {
  background-color: #4caf50; /* 点击后的背景色 */
  color: white; /* 字体颜色 */
}
.instructions {
  text-align: center;
}
.success-message {
  margin-top: 20px;
  color: green; /* 可以根据需要更改颜色 */
  font-weight: bold;
  text-align: center; /* 中心对齐 */
}
.confirm-button {
  background-color: #4caf50; /* 按钮背景色 */
  color: white; /* 按钮字体颜色 */
  padding: 15px 30px; /* 增加按钮内边距 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  font-size: 18px; /* 增大字体 */
  cursor: pointer; /* 鼠标悬停变为手指 */
  transition: background-color 0.3s; /* 动效 */
}
button:hover {
  background-color: #45a049; /* 鼠标悬停时的背景色 */
}
</style>
